<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>taskArea</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/table.css"/>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <style>
        canvas {
            float: left;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="/js/underscore-noflect.js"></script>
</head>

<body>
<% include headerTeacher.ejs %>
<div class="container">
    <div class="table-all-area">
        <div class="message-area">
            <ol class="breadcrumb">
                <li>
                    <a href="#">当前位置：</a>
                </li>
                <li>
                    <a href="/teacherIndex">主页</a>
                </li>
                <li class="active">
                    <a href="#">成绩管理</a>
                </li>
            </ol>
        </div>
        <div class="input-group col-md-3" style="margin-top:0px;positon:relative;margin-bottom: 20px">
            <input type="text" id="studentId" class="form-control" placeholder="请输入您的学号"/>
            <span class="input-group-btn">
                        <button id="searchGradeBtnT" type="button" class="btn btn-primary">查找</button>
                    </span>
        </div>
        <table class="table table-bordered" id="studentInfoTableArea">
        </table>
        <table class="table table-bordered" id="tableArea">
            <tr class="active">
                <th>课程名称</th>
                <th>学年</th>
                <th>学期</th>
                <th>成绩</th>
                <th>绩点</th>
                <!--<th>操作</th>-->
            </tr>
        </table>
    </div>
    <!-- Modal -->
    <!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
        <!--<div class="modal-dialog" role="document">-->
            <!--<div class="modal-content">-->
                <!--<div class="modal-header">-->
                    <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span-->
                                <!--aria-hidden="true">&times;</span></button>-->
                    <!--<h4 class="modal-title" id="myModalLabel">成绩详情</h4>-->
                <!--</div>-->
                <!--<div class="modal-body">-->
                    <!--请上对应教务网查询成绩详情或者咨询相关老师，谢谢支持理解！-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <!--&lt;!&ndash;<button type="button" class="btn btn-primary">Save changes</button>&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <hr class="divider task-divider"/>
    <div class="container summary">
        <footer>
            <p class="pull-right">
                <a href="#top">回到顶部</a>
            </p>
            <p class="pull-left">&copy; 学生档案管理系统</p>
        </footer>
    </div>
</div>
<!--前端模板-->
<script type="text/template" id="lessonTable">
    {{if(allTime>80){}}
    <tr class="success">
     {{ }else if(allTime>60){  }}
        <tr class="warning">
        {{ }else{ }}
            <tr class="danger">
            {{ } }}
        <td>{{=lessonCategory}}</td>
        <td>{{=testYear}}</td>
        <td>{{=testSemester}}</td>
        <td>{{=allTime}}</td>
        <td>{{=gradePoint}}</td>
        <!--<td>-->
            <!--&lt;!&ndash;<a>&ndash;&gt;-->
            <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"-->
                    <!--style="padding: 4px 10px;font-size: 12px;">-->
                <!--查看详情-->
            <!--</button>-->
            <!--&lt;!&ndash;</a>&ndash;&gt;-->
        <!--</td>-->
    </tr>
</script>
<script>
    var $tableArea = $("#tableArea");
    //得到模板函数
    var compiled = _.template($("#lessonTable").html());
        //ajax服务，获取信息
    $("#searchGradeBtnT").click(function () {
        $("#studentInfoTableArea").html("");
        $("#tableArea").html("");
        $.get("/searchGrade", {
            "studentId": $("#studentId").val()
        }, function (result) {
            if (result == "") {
                alert("没有该同学的成绩，请重新输入学号查询！");
                return;
            }
            let studentN=result[0].studentName;
            let studentId=result[0].teacherNum;
            $("#studentInfoTableArea").html(`<tr>
                <th >学生姓名</th>
                <th>学生学号</th>
            </tr>
            <tr>
                <td>${studentN}</td>
                <td>${studentId}</td>
            </tr>`)
            $("#tableArea").html(`<tr class="active">
                <th>课程名称</th>
                <th>学年</th>
                <th>学期</th>
                <th>成绩</th>
                <th>绩点</th>
            </tr>`)
            iterator(0);
            function iterator(i) {
                if (i == result.length) {
                    return;
                }
                console.log(result[i]);
                var htmlstring = compiled(result[i]);

                $("#tableArea").append($(htmlstring));
                iterator(i + 1);
            }
        })
    })

    var lineChartData = {
        labels: ["", "", "", "", "", "", "", "", "", "", "", ""],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: [65, 59, 50, 81, 56, 55, 40, 20, 21, 44, 21, 3]
        },
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: [28, 48, 40, 19, 96, 27, 50, 32, 10, 43, 67, 2]
            },
        ]

    };
    var chartData = [{
        value: Math.random(),
        color: "#D97041"
    },
        {
            value: Math.random(),
            color: "#C7604C"
        },
        {
            value: Math.random(),
            color: "#21323D"
        },
        {
            value: Math.random(),
            color: "#9D9B7F"
        },
        {
            value: Math.random(),
            color: "#7D4F6D"
        },
        {
            value: Math.random(),
            color: "#584A5E"
        }
    ];
    var radarChartData = {
        labels: ["", "", "", "", "", "", ""],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: [28, 48, 40, 19, 96, 27, 100]
            }
        ]

    };
    var doughnutData = [{
        value: 30,
        color: "#F7464A"
    },
        {
            value: 50,
            color: "#46BFBD"
        },
        {
            value: 100,
            color: "#FDB45C"
        },
        {
            value: 40,
            color: "#949FB1"
        },
        {
            value: 120,
            color: "#4D5360"
        }

    ];
//
//    var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
//    new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
    //			new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
</script>
</body>

</html>